<template>
  <div class="demo">
    <div class="demo-title">卡片支持更多内容配置</div>
    <div class="demo-content">
      <Card hoverable style="width: 300px">
        <template #cover>
          <img
            alt="example"
            src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
          />
        </template>
        <template #actions>
          <SettingOutlined key="setting" />
          <EditOutlined key="edit" />
          <EllipsisOutlined key="ellipsis" />
        </template>
        <Card.Meta title="Card title" description="This is the description">
          <template #avatar>
            <Avatar src="https://joeschmoe.io/api/v1/random" />
          </template>
        </Card.Meta>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
  import Avatar from '@sscd/avatar';
  import Card from '@sscd/card';
</script>
